<template>
    <div>
        <router-link to="/login" id="toLogin"></router-link>
        <div v-if="Object.keys(data).length>0">
            <home-top :userMsg="data" @isPopover="popover"></home-top>
            <mu-card style="width: 92vw;margin: 15px auto;" :raised=true>
                <ul class="homeLinkTo">
                    <li><router-link to="/custom"><img src="@/images/neitui/wodekehu.png" alt=""><span>我的客户</span></router-link></li>
                    <li><router-link to="/achievement"><img src="@/images/neitui/gerenyeji.png" alt=""><span>个人业绩</span></router-link></li>
                    <li><router-link to="/rankingList"><img src="@/images/neitui/paihang.png" alt=""><span>排行榜</span></router-link></li>
                </ul>
            </mu-card>
            <detail-list :list="data.list" v-if="data.list.length>0"></detail-list>
            <div style="text-align:center;padding-top:50px" v-else>
                <img src="@/images/neitui/11.png" alt="" style="width:275px">
                <p style="margin-top:10px">暂无数据</p>
            </div>
            <div class="popover" v-show="isPop" @click="popNone" @touchstart="gtouchstart()" @touchmove="gtouchmove()" @touchend="gtouchend()">
                <div class="homePopContent">
                    <!-- <span><img :src="data.user.image" alt="" style="width:100%;height:100%"></span> -->
                    <p style="font-size:20px;padding-top:20px">推荐人：{{data.user.name}}</p>
                    <img src="@/images/neitui/napin1.png" alt="" style="width:40px; top: 119px;left: 105px;position:absolute;">
                    <div id="qrcode" ref="qrcode"></div>
                    
                </div>
                <p style="color:#55A9FF;text-align:center;position:absolute;top:440px;width:100vw">长按保存二维码</p>
                <canvas id="myCanvas"></canvas>
            </div>
        </div>
        
        
    </div>
</template>

<script>
    import request from '@/request/index.js'
    import homeTop from '@/components/home/top.vue'
    import detailList from '@/components/home/detailList.vue'
    import html2canvas from 'html2canvas';
    import QRCode from 'qrcodejs2';
    import { setTimeout, setInterval, clearInterval } from 'timers';
    export default {
        name: "home",
      components:{
          homeTop,
          detailList,
          
          
      },
        data() {
            return {
                token:'',
                page:1,
                data:{},
                isPop:false,
                codeUrl:'',
                timeOutEvent:0,
                
            };
        },
        methods:{
            qrcode:function(URL) {
                let qrcode = new QRCode('qrcode',{
                    width: 130, // 设置宽度，单位像素
                    height: 130, // 设置高度，单位像素
                    text: URL,   // 设置二维码内容或跳转地址
                })
            },
            
            popover:function(){
                this.isPop=!this.isPop;
                var that=this;
                var qrcode=document.getElementById("qrcode");
                var qrcodeImg=qrcode.childNodes;
                if(qrcodeImg.length==0){
                    this.qrcode(this.codeUrl);
                }
                setTimeout(function(){
                    that.draw()
                },100)
                
                
            },
            popNone:function(){
                this.isPop=false;
            },
            draw:function(){
                var that=this;
                let myCanvas=document.getElementsByClassName('homePopContent')[0];
                html2canvas(myCanvas,{scale:2,logging:false,useCORS:true}).then(function(myCanvas) {
                    let type = 'png';
                    let imgData = myCanvas.toDataURL(type);
                    // 照片格式处理
                    let _fixType = function(type) {
                        type = type.toLowerCase().replace(/jpg/i, 'jpeg');
                        let r = type.match(/png|jpeg|bmp|gif/)[0];
                        return 'image/' + r;
                    };
                    imgData = imgData.replace(_fixType(type),'image/octet-stream');
                    document.getElementsByClassName('homePopContent')[0].innerHTML="<img style='width:250px; height: 300px' src='"+imgData+"'>"
                });

            },
            // saveFile(data, filename){
            //     let save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
            //     save_link.href = data;
            //     save_link.download = filename;
            
            //     let event = document.createEvent('MouseEvents');
            //     event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            //     save_link.dispatchEvent(event);
            // },
            gtouchstart(){ 
                var that=this;  
                this.timer = setInterval(function(){
                    that.timeOutEvent++;
                    if(that.timeOutEvent>=10){
                        clearInterval(that.timer);
                        that.longPress();
                    }
                },100);   
            },     
            gtouchend(){ 
                this.timeOutEvent=0;
                clearInterval(this.timer);   
            },    
            gtouchmove(){ 
                this.timeOutEvent=0  
                clearInterval(this.timer)    
                
            },  
            longPress(){   
                this.timeOutEvent = 0; 
                this.draw();  
            },
            loading () {
                
            }
        },
      created(){
          
      },
      mounted(){
                const loading = this.$loading({
                    // ...options
                    color:'#55A9FF',
                    overlayColor:'rgba(0,0,0,.5)',
                    className: 'loadingStyle',
                });
          
            if(this.$route.query.token){
                this.$cookie.set('token',this.$route.query.token,7);
                this.token=this.$cookie.get('token');
            }else{
                if(this.$cookie.get('token')){
                    this.token=this.$cookie.get('token');
                }
                else{
                    document.getElementById('toLogin').click();
                }
            }
            request.getDetailed(this,loading);
            // request.getQecode(this);
      }
    }
</script>

<style scoped lang="scss">
.popover{
    position:fixed;
    top:0px;
    left:0px;
    height:100vh;
    width:100vw;
    background:rgba(0,0,0,.3);
    #qrcode{
        display: inline-block;
        margin-top:20px;
    }
    .homePopContent{
        position: relative;
        width:250px;
        margin:0 auto;
        height:300px;
        margin-top:200px;
        background:#ffffff;
        text-align: center;
        >span{
            position: absolute;
            top:-32px;
            left:50%;
            margin-left: -32px;
            width:64px;
            height:64px;
            overflow: hidden;
            border-radius: 50%;
            border: solid #ffffff 1px;
            display: block;
            img{
                height:100%;
                width:100%;
            }
        }
    }
}
.homeLinkTo{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    a{
        display: block;
    }
    li{
        width:30%;
    }
    text-align:center;
      padding: 18px 0 15px 0;
      img{
            width: 27px;
            // display: block;

      }
      span{
          font-size: 15px;
          display: block;
          color:#333333;
      }
    
}
  .loginLogo{
      text-align:center;
      margin-top:20vw;
      span{
          display: block;
          color:#666666;
          margin-top:10px;
          font-size:12px;
      }
      img{
          width:60px;
      }
  }
  .loginBottons{
      width:75vw;
      margin:0 auto;
      margin-top:94px;
      li{
          margin-top:19px
      }
  }
</style>
